<template>
  <div>
    <el-dialog title="商品添加" :visible.sync="isShow" center>
      <el-form :model='seckillFrom' ref="seckillRef">
       <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="seckillFrom.title"></el-input>
        </el-form-item>
   <el-form-item label="活动期限" :label-width="formLabelWidth">
           <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
            value-format="yyyy-MM-dd">

    </el-date-picker>
        </el-form-item>

      <el-form-item label="一级分类" :label-width="formLabelWidth" prop='first_cateid' >

          <el-select placeholder="请选择" v-model="seckillFrom.first_cateid" @change='changeCate' >

      <el-option
              v-for="item in cateList"
              :label="item.catename"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth">
          <el-select placeholder="请选择活动区域" v-model="seckillFrom.second_cateid">
            <el-option  v-for="item in cateArr"
              :label="item.catename"
              :value="item.id"
              :key="item.id"></el-option>
          </el-select>
        </el-form-item>
     <el-form-item label="商品" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="seckillFrom.goodsid">
            <el-option  v-for="item in goodslist"
              :label="item.goodsname"
              :value="item.id"
              :key="item.id"></el-option>
          </el-select>
        </el-form-item>

      <el-form-item label="状态" :label-width="formLabelWidth">
  <el-switch
    v-model="seckillFrom.status"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value="1"
    :inactive-value="2">
  </el-switch>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { seckadd, goodslist, seckinfo, seckedit } from '../../../api/api.js'
import { mapActions, mapGetters } from 'vuex'
export default {
  props: ['isShow', 'isAdd'],
  data () {
    return {
      seckillFrom: {
        title: '',
        begintime: '', // 开始时间,
        endtime: '', // 结束时间
        first_cateid: '', // 商品一级分类编号
        second_cateid: '', /// 商品二级
        goodsid: '', // 商品编号
        status: 1 // 状态
      },
      formLabelWidth: '120px',
      value1: '',
      cateArr: [],
      goodslist: [] // 商品数据
    }
  },
  methods: {
    ...mapActions({
      getCatelist: 'classify/getCatelist',
      getSecklist: 'seckill/getSecklist'

    }),
    changeCate (n) {
      // 同过双向数据绑定获取到 id 值 来查找二级分类

      const index = this.cateList.findIndex(item => {
        return item.id === this.seckillFrom.first_cateid
      })

      this.cateArr = this.cateList[index].children
      //  每次选取一级分类 清空2级分类
      if (!n) {
        this.seckillFrom.second_cateid = ''
      }
    },
    async getGoodslist () {
      const res = await goodslist({ fid: this.seckillFrom.first_cateid, sid: this.seckillFrom.second_cateid })

      this.goodslist = res.list
    },
    confirm () {
      this.$refs.seckillRef.validate((val) => {
        if (val) {
          if (this.isAdd) {
            this.seckillFrom.begintime = new Date(this.value1[0]).getTime()
            this.seckillFrom.endtime = new Date(this.value1[1]).getTime()
            seckadd(this.seckillFrom).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.getSecklist()
              }
            })
          } else {
            seckedit(this.seckillFrom).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.cancel()
                this.getSecklist()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('验证失败')
        }
      })
    },
    cancel () {
      // 去改变父组件的isShow的状态
      this.$emit('cancel', false)
      // 调取清空事件
      this.reset()
    },
    reset () {
      this.seckillFrom = {
        title: '',
        begintime: '', // 开始时间,
        endtime: '', // 结束时间
        first_cateid: '', // 商品一级分类编号
        second_cateid: '', /// 商品二级
        goodsid: '', // 商品编号
        status: 1 // 状态
      }
      // 调用清空验证的方法
      this.$refs.seckillRef.resetFields()
    },
    lookup (id) {
      seckinfo({ id }).then((res) => {
        if (res.code === 200) {
          this.seckillFrom = res.list
          this.seckillFrom.id = id

          this.value1 = [new Date(Number(this.seckillFrom.begintime)), new Date(Number(this.seckillFrom.endtime))]
          // 分类回显
          this.changeCate(true)
          // 商品回显
          // this.changeShopAttrs(true)
        }
      })
    }
  },
  mounted () {
    this.getCatelist()
    this.getGoodslist()
  },
  computed: {
    ...mapGetters({
      cateList: 'classify/getcatelist',
      getSeckData: 'seckill/getSeckData'
    })
  }

}
</script>

<style>

</style>
